// import login from '@/request/login';
import { LockFilled, UserOutlined } from '@ant-design/icons';
import { Button, message, Form, Input } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

import styles from './index.module.less';

const Login: React.FC = () => {
  const [loading, setLoading] = useState(false); // 按钮的加载状态
  const navigate = useNavigate();

  // 登录
  const handleSubmit = async (params: any) => {
    setLoading(true);
    // const response: any = await login.login(params);

    setLoading(false);
    navigate('/dashboard');

    // if (response.errcode === 0) {
    //   message.success('登录成功！');
    //   navigate('/dashboard');
    // }
  };

  return (
    <div className={styles.container}>
      <div>
        <div className={styles.header}>
          <div>Hello！</div>
          <div>something describe</div>
        </div>
        <div className={styles.main}>
          <Form onFinish={handleSubmit} style={{ width: 300 }}>
            <Form.Item name="name" rules={[{ required: true, message: '账号不能为空' }]}>
              <Input
                prefix={<UserOutlined style={{ color: '#ccc' }} />}
                placeholder="请输入账号"
                style={{ height: 40, background: '#f7f4fc' }}
              />
            </Form.Item>
            <Form.Item name="password" rules={[{ required: true, message: '密码不能为空' }]}>
              <Input.Password
                style={{ height: 40, background: '#f7f4fc' }}
                placeholder="请输入密码"
                prefix={<LockFilled style={{ color: '#ccc' }} />}
              />
            </Form.Item>
            <Button
              loading={loading}
              type="primary"
              htmlType="submit"
              style={{ width: 150, height: '50px', background: '#89d0b1', border: 'none' }}
            >
              登录
            </Button>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Login;
